<template>
  <canvas id="canvas" ref="canvasRef" width="500" height="500" style="background-color:#333"></canvas>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
let canvasRef = ref<HTMLCanvasElement | null>(null);
let ctx = null;
let radius = canvasRef.height / 2;
radius = radius * 0.90
onMounted(() => {
  if (canvasRef.value) {
    ctx = canvasRef.value.getContext("2d");
    // 绘制钟面
    drawClock();
  }
});
const drawClock = () => {
  if (ctx) {
    const gradient = ctx.createRadialGradient(0, 0, (canvas.height / 2) * 0.95, 0, 0,  (canvas.height) * 1.05);
    gradient.addColorStop(0, "#333");
    gradient.addColorStop(0.5, "white");
    gradient.addColorStop(1, "#333");

    ctx.beginPath();
    ctx.arc(
      canvas.width / 2,
      canvas.height / 2,
      canvas.width / 2 - 20,
      0,
      2 * Math.PI
    );
    ctx.fillStyle = "white";
    ctx.fill();

    ctx.strokeStyle = gradient;
    ctx.lineWidth = (canvas.height / 2 * 0.9) * 0.1;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, 20, 0, 2 * Math.PI);
    ctx.fillStyle = "#333";
    ctx.fill();
  }
};
const drawHour = () => {};
</script>
